<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的主页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #f5f5f5;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 返回按钮 */
        .back-btn {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: #fff9e6;
            color: #333;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            margin-bottom: 20px;
            transition: all 0.3s;
        }

        .back-btn:hover {
            background: #ffed4a;
            transform: translateY(-1px);
        }

        /* 用户信息区域 */
        .user-info {
            background: #ffd700;
            padding: 30px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
        }

        .user-details {
            color: #333;
        }

        .user-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .user-role {
            font-size: 14px;
            opacity: 0.8;
        }

        /* 订单导航 */
        .order-nav {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            text-align: center;
        }

        .order-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: #333;
            padding: 10px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .order-item:hover {
            background: #fff9e6;
            transform: translateY(-2px);
        }

        .order-item i {
            font-size: 24px;
            color: #ffd700;
        }

        /* 服务区域 */
        .services {
            background: white;
            border-radius: 8px;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .service-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            color: #333;
        }

        .service-item:hover {
            background: #fff9e6;
            transform: translateY(-2px);
        }

        .service-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff9e6;
            border-radius: 8px;
            color: #ffd700;
            font-size: 20px;
        }

        .service-info {
            flex: 1;
        }

        .service-title {
            font-weight: bold;
            margin-bottom: 4px;
        }

        .service-desc {
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="home.html" class="back-btn">
            <i class="fas fa-arrow-left"></i>
            <span style="margin-left: 8px;">返回首页</span>
        </a>

        <!-- 用户信息区域 -->
        <div class="user-info">
            <img src="img/default-avatar.png" alt="头像" class="user-avatar" id="userAvatar">
            <div class="user-details">
                <div class="user-name" id="userName">加载中...</div>
                <div class="user-role"></div>
            </div>
        </div>

        <!-- 订单导航 -->
        <div class="order-nav">
            <a href="order.html?status=待付款" class="order-item">
                <i class="fas fa-wallet"></i>
                <span>待付款</span>
            </a>
            <a href="order.html?status=待发货" class="order-item">
                <i class="fas fa-shipping-fast"></i>
                <span>待发货</span>
            </a>
            <a href="order.html?status=待收货" class="order-item">
                <i class="fas fa-box"></i>
                <span>待收货</span>
            </a>
            <a href="order.html?status=待评价" class="order-item">
                <i class="fas fa-comment-dots"></i>
                <span>待评价</span>
            </a>
            <a href="order.html?status=已评价" class="order-item">
                <i class="fas fa-check-circle"></i>
                <span>已评价</span>
            </a>
            <a href="order.html" class="order-item">
                <i class="fas fa-list"></i>
                <span>全部订单</span>
            </a>
        </div>

        <!-- 服务区域 -->
        <div class="services">
            <a href="publish-select.html" class="service-item">
                <div class="service-icon">
                    <i class="fas fa-upload"></i>
                </div>
                <div class="service-info">
                    <div class="service-title">发布商品</div>
                    <div class="service-desc">快速发布二手商品</div>
                </div>
            </a>
            <a href="sold-orders.html" class="service-item">
                <div class="service-icon">
                    <i class="fas fa-store"></i>
                </div>
                <div class="service-info">
                    <div class="service-title">我卖出的</div>
                    <div class="service-desc">查看已卖出的商品</div>
                </div>
            </a>
            <a href="product-manage.html" class="service-item">
                <div class="service-icon">
                    <i class="fas fa-boxes"></i>
                </div>
                <div class="service-info">
                    <div class="service-title">商品管理</div>
                    <div class="service-desc">管理在售商品</div>
                </div>
            </a>
            <a href="setting.html" class="service-item">
                <div class="service-icon">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="service-info">
                    <div class="service-title">收货地址</div>
                    <div class="service-desc">管理收货地址</div>
                </div>
            </a>
            <a href="favorite.html" class="service-item">
                <div class="service-icon">
                    <i class="fas fa-heart"></i>
                </div>
                <div class="service-info">
                    <div class="service-title">我的收藏</div>
                    <div class="service-desc">查看收藏的商品</div>
                </div>
            </a>
            <a href="setting.html" class="service-item">
                <div class="service-icon">
                    <i class="fas fa-cog"></i>
                </div>
                <div class="service-info">
                    <div class="service-title">账户设置</div>
                    <div class="service-desc">修改个人信息</div>
                </div>
            </a>
            <a href="history.html" class="service-item">
                <div class="service-icon">
                    <i class="fas fa-history"></i>
                </div>
                <div class="service-info">
                    <div class="service-title">浏览历史</div>
                    <div class="service-desc">查看浏览过的商品</div>
                </div>
            </a>
        </div>
    </div>

    <!-- 添加 JavaScript -->
    <script>
        $(document).ready(function() {
            // 加载用户信息
            $.ajax({
                url: '/user/get-user',
                type: 'GET',
                success: function(response) {
                    if (response.state === 1) {
                        const user = response.data;
                        $('#userAvatar').attr('src', user.avatar || 'img/default-avatar.png');
                        $('#userName').text(user.nickname || user.username);
                    } else {
                        location.href = 'login.html';
                    }
                },
                error: function() {
                    location.href = 'login.html';
                }
            });
        });
    </script>
</body>
</html> 